<template>
	<view class="min100 plr-30 gray-2 pb-100">
		<u-tabs font-size="26" class="mb-20" active-color="#44ACFF" inactive-color="#999" bg-color="transparent"
			:list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 列表 -->
		<empty v-if="list.length==0"></empty>
		<view class="plr-30 bg ptb-30 radius-40 mb-30 size-22 flex flex-top flex-start recordItem" v-else
			v-for="(item,index) in list" :key="index">
			<image class="collectImg radius-40 mr-20" :src="item.image"></image>
			<view style="width:72%;" class="">
				<view class="flex flex-between">
					<view class="size-30 mb-60 red">
						{{item.name}}
					</view>
					<view class="size-30 mb-60 red">
						{{item.create_time}}
					</view>
				</view>
				
				<view class="flex flex-between">
					<view class="size-30">
						<!-- ￥{{item.price}} -->
					</view>
					<view class="size-28 red">
						<view class="red" v-if="item.status==0">
							合成失败
						</view>
						<view class="red" v-if="item.status==1">
							合成成功
						</view>
						<!-- <view class="red " v-if="item.status==2">
							待发放
						</view>
						<view class="red" v-if="item.status==3">
							已领取
						</view> -->
					</view>
				</view>
				<!-- <view class="flex mt-40 btnWrap" style="float: right;" v-if="item.status==1">
					<u-button hover-class="none" class="exchangeBtn" @click="toExchange(item.id)">
						兑换领取</u-button>
				</view> -->
			</view>
		</view>
		<!-- 填写信息 -->
		<u-popup @close="closePop" v-model="exchangeShow" mode="center" class="bg" border-radius="30" width="630rpx">
			<view class="plr-30 ptb-30 bg size-28 white">
				<view class="text-center">
					填写地址
				</view>
				<view class="popTitle mtb-20 pl-20">
					收件人
				</view>
				<u-field v-model="name" :border-bottom="false" label-width="0" placeholder-style="color:#999"
					placeholder="请输入收件人姓名">
				</u-field>
				<view class="popTitle mtb-20 pl-20">
					收件人电话
				</view>
				<u-field v-model="phone" :border-bottom="false" label-width="0" placeholder-style="color:#999"
					placeholder="请输入收件人电话">
				</u-field>
				<view class="popTitle mtb-20 pl-20">
					收件人地址
				</view>
				<u-field @click="regionShow=true" v-model="city" :disabled="true" :border-bottom="false" label-width="0"
					placeholder-style="color:#999" placeholder="请选择收件人地址">
				</u-field>
				<view class="popTitle mtb-20 pl-20">
					收件人详细地址
				</view>
				<u-field v-model="address" :border-bottom="false" label-width="0" placeholder-style="color:#999"
					placeholder="请输入收件人详细地址">
				</u-field>
				<u-button type="primary" hover-class='none' style="width:570rpx;margin-top:40rpx" @click.stop="submit">
					确认</u-button>
			</view>
		</u-popup>
		<u-picker mode="region" v-model="regionShow" @confirm="submitAddress"></u-picker>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				tabs: [{
						name: '全部'
					},
					{
						name: '合成失败'
					}, {
						name: '合成成功'
					},
					// {
					// 	name: '待发放'
					// }, {
					// 	name: '已领取'
					// }
				],
				current: 0,
				status: '',
				city: '',
				address: '',
				regionShow: false,
				failShow: false,
				successShow: false,
				name: '',
				phone: "",
				list: [],
				exchangeId: '',
				exchangeShow: false,
				page: 1
			}
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			// if(this.list.length!==0){
			// 	console.log('33')
			// 	this.page++
			// 	this.init()
			// }
		},
		methods: {
			change(index) {
				this.current = index;
				if (index == 0) {
					this.status = '';
				} else {
					this.status = Number(index - 1);
				}
				this.init();
			},
			// 选择地区
			submitAddress(item) {
				this.city = item.province.label + item.city.label + item.area.label;
			},
			// 关闭兑换弹框
			closePop() {
				this.exchangeShow = false;
			},
			toExchange(id) {
				this.exchangeShow = true;
				this.exchangeId = id;
			},
			// 确认兑换
			submit() {
				if (this.name == '') {
					uni.showToast({
						title: "请输入收件人姓名",
						icon: 'none'
					})
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: "请输入收件人手机号码",
						icon: 'none'
					})
					return;
				}
				if (this.city == '') {
					uni.showToast({
						title: "请选择收件人地址",
						icon: 'none'
					})
					return;
				}
				if (this.address == '') {
					uni.showToast({
						title: "请输入收件人详细地址",
						icon: 'none'
					})
					return;
				}
				this.$http('api/forge/apply', {
					name: this.name,
					phone: this.phone,
					id: this.exchangeId,
					city: this.city,
					address: this.address
				}).then(res => {
					uni.showToast({
						title: "领取成功!",
						icon: "none"
					})
					this.current=3;
					this.status=2;
					this.exchangeShow = false;
					this.init();
				})
			},
			init() {
				this.list = [];
				this.$http('api/forge_bin_fen/forgeRecord', {
					status: this.status,
					page: this.page
				}).then(res => {
					this.list = res;
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}


	.collectImg {
		width: 150rpx;
		height: 150rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.exchangeBtn {
		width: 173rpx;
		height: 60rpx !important;
		padding: 0 20rpx;
		background: #44ACFF;
		border-radius: 30rpx;
		color: #2F2F2E;
		font-size: 26rpx;
	}
	.recordItem{
		border: 1rpx solid #f5f5;
		box-shadow: #f5f5f5 0rpx 8rpx 20rpx 5rpx;
	}
	.popTitle {
		position: relative;

		&::after {
			position: absolute;
			left: 0;
			top: 6rpx;
			display: block;
			content: '';
			width: 10rpx;
			height: 28rpx;
			background: #44ACFF;
			border-radius: 5rpx;
		}
	}

	::v-deep  .u-field {
		color: #fff !important;
		font-size: 26rpx;
		background: #2F2F2E;
		border-radius: 20rpx;
	}



	::v-deep  .u-mode-center-box {
		background-color: transparent;
	}
</style>
